{% extends "site_base.html" %}
{% load qa_tags %}
{% load listable %}
{% load static %}

{% block head_title %}QC Program Overview by Due Date{% endblock %}

{% block extra_css %}
  <link href="{% static "listable/css/jquery.dataTables.bootstrap.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "datepicker/css/bootstrap-datepicker.min.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "multiselect/css/bootstrap.multiselect.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "daterangepicker/css/daterangepicker.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/custom-daterangepicker.css" %}?v={{ VERSION }}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/tables.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "qa/css/qa.css" %}?v={{ VERSION }}" rel="stylesheet">
{% endblock extra_css %}

{% block extra_js %}
    {% autoescape off %}
    {% endautoescape %}
{% endblock %}

{% block require_javascript %}

require(['moment', 'listablestatic'], function(moment, listable){
$(document).ready(function(){
  var filters = [
    {type: "text"},
    {
      type: "select",
      multiple: "multiple",
      values: [
        {% for unit in units %}
        {value: "{{ unit }}", label: "{{ unit }}" }{% if not forloop.last %},{% endif %}
        {% endfor %}
      ],
      bRegex: true
    },
    {type: "text"},
    {
      type: "select",
      multiple: "multiple",
      values: [
        {% for freq in freqs %}
        {value: "{{ freq }}", label: "{{ freq }}"}{% if not forloop.last %},{% endif %}
        {% endfor %}
      ],
      bRegex: true
    },
    {
      type: "select",
      multiple: "multiple",
      values: [
        {% for group in groups %}
            {value: "{{ group }}", label: "{{ group }}"}{% if not forloop.last %},{% endif %}
        {% endfor %}
      ],
      bRegex: true
    }
  ];
  $(".overview-table").each(function(i, e){
    var id = $(this).attr("id");
    var Listable = {
        "DOM": "<'row'<'col-sm-5'i><'col-sm-7'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'><'col-sm-7'p>>",
        "autoWidth": false,
        "columnDefs": [null, null, {'sType': "span-timestamp"}, null, null],
        "columnFilterDefs": filters,
        "cookie": "dt-" + i +"_" + id + "_",
        "cookiePrefix": "dt-" + i + "_",
        "cssInputClass": "btn-flat btn-sm input-sm full-width",
        "cssTableClass": "table table-hover table-condensed",
        "displayLength": 10,
        "order": [[2, 'asc']],
        paginate: false,
        "paginationType": "bootstrap3",
        "stateSave": true,
        "tableId": "#" + id
    };

    listableStatic(Listable, moment);

  });

  });

});
{% endblock require_javascript %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            {% if user_groups %}
                <h4 class="box-title"><i class="fa fa-calendar fa-fw" aria-hidden="true"></i>QC Program Overview By Due Date For Your Groups</h4>
                <p>View which test lists (visible to your groups) are due or coming due soon</p>
            {% else %}
                <h4 class="box-title"><i class="fa fa-calendar fa-fw" aria-hidden="true"></i>QC Program Overview By Due Date</h4>
                <p>View which test lists are due or coming due soon</p>
            {% endif %}
        </div>
    </div>

    {% for key, display, utcs in due %}
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header">
    {#                    <i class="fa fa-calendar fa-fw box-title" aria-hidden="true"></i>#}
                        <h3 class="box-title">{{display}} {% if utcs%}({{utcs|length}}){%endif%}</h3>
                    </div>
                    <div class="box-body row due-status-container">
                        <div class="col-md-12">
                            {% if utcs %}
                                <div class="due-status-lists">
                                  <table id="table-{{ key }}" class="table-responsive table-hover overview-table">
                                        <thead>
                                            <tr>
                                                <th><b>Name</b></th>
                                                <th><b>Unit</b></th>
                                                <th><b>Due Date</b></th>
                                                <th><b>Freq</b></th>
                                                <th><b>Assigned To</b></th>
                                            </tr>
                                            <tr>
                                                <th><b>Name</b></th>
                                                <th><b>Unit</b></th>
                                                <th><b>Due Date</b></th>
                                                <th><b>Freq</b></th>
                                                <th><b>Assigned To</b></th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for utc in utcs %}
                                                <tr>
                                                    <td>
                                                        <a title="Perform {{utc.name}} on {{utc.unit.name}}" href="{%url "perform_qa" utc.pk%}?day=next&next={{request.get_full_path}}">{{utc.name}}</a>
                                                    </td>
                                                    <td>
                                                        {{utc.unit.name}}
                                                    </td>
                                                    <td class="pad-r-10">
                                                        {{utc|as_due_date}}
                                                    </td>
                                                    <td >
                                                        {% firstof utc.frequency.name "Ad Hoc" %}
                                                    </td>
                                                    <td>
                                                        {{ utc.assigned_to.name }}
                                                    </td>
                                                </tr>
                                            {% endfor %}

                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <em>Nothing {{display }}</em>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

{% endblock %}

{% block end_body_extra_script %}

{% endblock %}
